<template>
    <div class="app-container">
        <div class="filter-container">
            <el-dialog
                title="修改商品分组"
                :visible.sync="dialogVisible"
                width="500px"
                :before-close="handleClose">
                <div class="editGoodsGounp">
                  <el-form :rules="adDialogRules" ref="dialogForm" :model="ad" label-position="right" label-width="140px" class="demo-ruleForm" style='width:400px;'>
                    <el-form-item :label="adDialogTitles.commissionSum" prop="commissionSum">
                      <el-input v-model="ad.commissionSum" size="medium"></el-input>
                    </el-form-item>
                    <el-form-item :label="adDialogTitles.amount" prop="amount">
                      <el-input v-model="ad.amount" size="medium"></el-input>
                    </el-form-item>
                    <el-form-item :label="adDialogTitles.ruleAmount" prop="ruleAmount">
                      <el-input v-model="ad.ruleAmount" size="medium"></el-input>
                    </el-form-item>
                    <el-form-item :label="adDialogTitles.coefficient" prop="coefficient">
                      <el-input v-model="ad.coefficient" size="medium"></el-input>
                    </el-form-item>
                  </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="makeSure()">确 定</el-button>
                </span>
            </el-dialog>
            <article>
              <el-table border :data="dataList">
                <el-table-column prop="memberLevel" label="级别" align="center" min-width="150px" >
                </el-table-column>
                <el-table-column label="总返利（RM）" align="center" min-width="150px">
                  <template slot-scope="scope">
                    {{scope.row.commisionSum|divideFilter}}
                  </template>
                </el-table-column>
                <el-table-column prop="amount" label="有效VIP人数（人）" align="center" min-width="150px">
                </el-table-column>
                <el-table-column label="考核指标（RM）" align="center" min-width="150px">
                  <template slot-scope="scope">
                    {{scope.row.ruleAmount|divideFilter}}
                  </template>
                </el-table-column>
                <el-table-column prop="coefficient" label="返利系数" align="center" min-width="150px">
                  <template slot-scope="scope">
                    {{scope.row.coefficient|divideFilter}}
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center" min-width="200px">
                    <template slot-scope="scope">
                        <el-button plain type="primary" size="mini" @click="toDditProduct(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
              </el-table>
              <!-- <list-pagination :total="total" :page="page" :pageSize="pageSize" :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange"></list-pagination> -->
            </article>
        </div>
    </div>
</template>
<script>
import list from '@/mixins/List'
import listPagination from '@/components/ListPagination'
import { divide } from '@/filter/index'
import {
  memberLevelList, setMemberLevel
} from '@/api/adminOperation'
export default {
  name: 'screenAdList',
  mixins: [list],
  data () {
    return {
      dataList: [],
      dialogVisible: false,
      productsOperate: {},
      ad: {
        commissionSum: '',
        amount: '',
        ruleAmount: '',
        coefficient: ''
      },
      adDialogTitles: {
        commissionSum: '总返利：',
        amount: '有效VIP人数：',
        ruleAmount: '考核指标：',
        coefficient: '返利系数：'
      },
      adDialogRules: {
        commissionSum: [{ required: true, message: '总返利不能为空', trigger: 'change' }],
        amount: [{ required: true, message: '有效VIP人数不能为空', trigger: 'change' }],
        ruleAmount: [{ required: true, message: '考核指标不能为空', trigger: 'change' }],
        coefficient: [{ required: true, message: '返利系数不能为空', trigger: 'change' }]
      }
    }
  },
  components: {
    listPagination
  },
  watch: {

  },
  mounted () {
    this.getList()
  },
  methods: {
    async getList () { // 列表
      let { data } = await memberLevelList({
        pageNum: this.page,
        pageSize: this.pageSize
      })
      this.dataList = data
      for (let item of this.dataList) {
        let memberLevel = ['s0', 's1', 's2', 's3', 's4', 's5', 's6']
        item.memberLevel = memberLevel[item.memberLevel]
      }
      // this.total = this.dataList.length
    },
    toDditProduct (row) {
      if (row.memberLevel === 's0') {
        this.ad.memberLevel = 0
      } else if (row.memberLevel === 's1') {
        this.ad.memberLevel = 1
      } else if (row.memberLevel === 's2') {
        this.ad.memberLevel = 2
      } else if (row.memberLevel === 's3') {
        this.ad.memberLevel = 3
      } else if (row.memberLevel === 's4') {
        this.ad.memberLevel = 4
      } else if (row.memberLevel === 's5') {
        this.ad.memberLevel = 5
      } else if (row.memberLevel === 's6') {
        this.ad.memberLevel = 6
      }
      this.ad.id = row.id
      this.ad.commissionSum = divide(row.commisionSum)
      this.ad.amount = row.amount
      this.ad.coefficient = divide(row.coefficient)
      this.ad.ruleAmount = divide(row.ruleAmount)

      this.dialogVisible = true
    },
    makeSure () {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          this.ad.commissionSum = this.ad.commissionSum
          this.ad.coefficient = this.ad.coefficient
          this.ad.ruleAmount = this.ad.ruleAmount
          setMemberLevel(this.ad).then(res => {
            if (res.code === 200) {
              this.dialogVisible = false
              this.$message.success('编辑成功')
              this.getList()
            }
          })
        }
      })
    },
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
    .editGoodsGounp {
      width: 100%;
      height: auto;
      padding: 20px 0;

    }
</style>
